<template>
  <div class="zh-game">
    <div class="title">数独小游戏</div>
    <div class="count-down">
      <div class="l">Time:{{count}}</div>
      <div class="c">难度: {{ difficulty }}</div>
      <div class="r" style="color: #026cc7">排行榜</div>
    </div>
    <div>
      <div class="sudoku_cell" :class="{ 'is-cell-bottom' : cellIndex === 3 || cellIndex === 6 }" v-for="(value, cellIndex) in gameList" :key="(cellIndex+value)">
      <div class="col" @click="colClickSelect(item)" v-for="(item,index) in value" :class="{ 'is-border': DomIndex === cellIndex + '' + index, 'is-left': index === 3 || index === 6  }" :key="(cellIndex+ ''+index)">
        <span v-if="item !== 0" :class="{ 'is-select': item === isSelect }" >{{ item }}</span>
        <span  class="color" :ref="refName + cellIndex + index" @click="clickInputNumber(cellIndex,index,$event)" v-else>{{ item === 0 ? null : item }}</span>
      </div>
    </div>
    </div>
    <div class="input-number">
      <div class="number-box" @click="inputNumber(item)" v-for="item in 9" :key="item">{{ item }}</div>
    </div>
    <div class="footer">
      <div class="btn-delete btn" @click="deleteInput">删除</div>
      <div class="btn-submit btn" @click="submit">提交</div>
      <div class="btn-reset btn" @click="showPicker = true">
        难度
      </div>
      <van-popup v-model="showPicker" round :style="{ height: '35%' }"  position="bottom">
          <van-picker
            value-key="value"
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
    </div>
    <div class="confirm">
      <van-dialog v-model="SuccessDialog" title="恭喜过关" show-cancel-button @confirm="handleNextSuccess">
        <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
        <div class="next">
          用时{{ count }}
          是否进入下一关
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import gameAll from '@/utils/game.js'
export default {
  data () {
    return {
      result: JSON.parse(JSON.stringify(this.$store.state.gameList)),
      num1: 0,
      num2: 0,
      refName: 'col-', // refs
      selectDom: '', // 选中的dom 赋值
      DomIndex: '', // 当前选中的key
      fatherIndex: '',
      sonIndex: '',
      showPicker: false, // 选择关卡弹框
      isSelect: '', // 是否选中，筛选当前选中的值
      count: '', // 时间
      SuccessDialog: false, // 过关弹框
      currentPass: '', // 当前关卡
      difficulty: '学者〇', // 当前难度
      timer: '',
      columns: [
        { key: 'difficulty1', value: '学者Ⅰ', name: 1 },
        { key: 'difficulty2', value: '学者Ⅱ', name: 2 },
        { key: 'difficulty3', value: '学者Ⅲ', name: 3 },
        { key: 'difficulty4', value: '高手Ⅳ', name: 4 },
        { key: 'difficulty5', value: '高手Ⅴ', name: 5 },
        { key: 'difficulty6', value: '高手Ⅵ', name: 6 },
        { key: 'difficulty7', value: '大师Ⅶ', name: 7 },
        { key: 'difficulty8', value: '大师Ⅷ', name: 8 },
        { key: 'difficulty9', value: '大师Ⅸ', name: 9 }
      ]
    }
  },
  watch: {
    gameList (value, oldValue) {
      this.result = JSON.parse(JSON.stringify(value))
    }
  },
  created () {
    if (this.$store.state.gameList.length !== 0) {

    } else {
      this.getSudokuGame('easy')
    }
    this.countDown('0', '0', '0')
  },
  computed: {
    ...mapState({ gameList: 'gameList', gameResult: 'gameResult' })
  },
  methods: {
    getSudokuGame (difficulty) {
      this.$axios.get('/fapig/sudoku/generate', { params: { difficulty, key: '9a840ad9fa0a347a902d5acca8b02fc0' } }).then(res => {
        this.$store.commit('updateGameList', res.data.result.puzzle)
        this.$store.commit('updategameResult', res.data.result.solution)
      })
    },
    submit () {
      this.num1 = 0
      this.num2 = 0
      this.flatten(this.result).forEach(item1 => {
        this.num1 += item1
      })

      this.flatten(this.$store.state.gameResult).forEach(item => {
        this.num2 += item
      })

      if (this.num1 === this.num2) {
        clearInterval(this.timer)
        this.SuccessDialog = true
      } else {
        this.$toast('很遗憾,继续努力~')
      }
    },
    handleInput (fatherIndex, index, e) {
      this.result[fatherIndex][index] = parseInt(e.data)
    },

    clickInputNumber (fatherIndex, index, fe, e) {
      const re = this.refName + fatherIndex + index
      this.fatherIndex = fatherIndex
      this.sonIndex = index
      this.DomIndex = fatherIndex + '' + index
      this.selectDom = this.$refs[re][0]
    },

    inputNumber (value) {
      this.selectDom.innerText = value
      this.result[this.fatherIndex][this.sonIndex] = value
    },

    deleteInput () {
      this.num1 = 0
      this.selectDom.innerText = null
    },
    onConfirm (item) {
      clearInterval(this.timer)
      this.currentPass = item.name
      this.difficulty = item.value
      for (const key in gameAll) {
        // eslint-disable-next-line eqeqeq
        if (key.toString() == item.key.toString()) {
          this.$store.commit('updateGameList', gameAll[key].puzzle)
          this.$store.commit('updategameResult', gameAll[key].solution)
        }
      }
      this.showPicker = false
      this.countDown('0', '0', '0')
    },
    colClickSelect (item) {
      this.isSelect = item
    },
    flatten (arr) {
      return arr.join(',').split(',')
    },
    countDown (ss = 0, mm = 0, hh = 0) {
      this.timer = setInterval(() => {
        if (ss++ >= 60) {
          ss = 0
          mm++
          if (mm++ >= 60) {
            mm = 0
            hh++
          }
        }
        this.count = hh + ':' + mm + ':' + ss
      }, 1000)
    },
    handleNextSuccess () {
      if (this.currentPass >= 9) {
        this.$toast('Be Cleared By The Customs')
        return false
      }
      this.countDown('0', '0', '0')
      this.columns.forEach((item, index) => {
        if (item.name === this.currentPass) {
          for (const key in gameAll) {
            // eslint-disable-next-line eqeqeq
            if (key.toString() == this.columns[index + 1].key.toString()) {
              this.difficulty = this.columns[index + 1].value
              // console.log(this.columns[index + 1])
              // this.currentPass = this.columns[index + 1].name
              this.$store.commit('updateGameList', gameAll[key].puzzle)
              this.$store.commit('updategameResult', gameAll[key].solution)
            }
          }
        }
      })
      this.currentPass++
    }
  }
}
</script>

<style lang="less" scoped>
  .count-down {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    align-items: center;
  }
  .next {
    padding: 20px;
    text-align: center;
    color: #000;
  }
  .is-select {
    color: #ffb364;
    background-color: #eee;
  }
  .is-cell-bottom {
    border-top: 1px solid #333 !important;
  }
  .is-left {
    border-left-color: #333 !important;
    position: relative;
    z-index: 999;
  }
  .is-border {
    box-sizing: border-box;
    border: 1px solid #af8204 !important;
    height: calc(100% - 2px);
  }
  .color {
    color: #fc6d6d;
  }
  .zh-game {
    height: 100%;
    padding: 10px;
    padding-bottom: 0px;
    background: #fff;
    .title {
      text-align: center;
      margin-bottom: 20px;
    }
    .sudoku_cell {
      display: flex;
      border: 1px solid #eee;
      border-top: none;
      &:first-child {
        border-top: 1px solid #eee;
      }
      .col {
        box-sizing: border-box;
        width: 11.11%;
        border-left: 1px solid #eee;
        text-align: center;
        color: #777;
        font-size: 32px;
        &:first-child {
          border-left: none;
        }
        span {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
        .input {
          width: 20px;
          height: 25px;
          border: none;
          outline: none;
          color: #fc6d6d;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-around;
      .btn {
        margin: 20px auto;
        width: 68px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        border-radius: 5px;
      }
      .btn-delete {
        background:linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
      }
      .btn-submit {
        background:linear-gradient(to right, #34bdff, #026cc7);
      }
      .btn-reset {
        background:linear-gradient(to right, #ffb364, #af8204);
      }
    }
    .input-number {
      margin-top: 30px;
      margin-bottom: 10px;
      display: flex;
      border: 1px solid #eee;
      border-radius: 5px;
      text-align: center;
      .number-box {
        padding: 5px 0px;
        flex: 1;
        border-left: 1px solid #eee;
        &:first-child {
          border-left: none;
        }
        color: #323233;
      }
    }
  }
</style>
